/**
 * 组件：SwitchButton 带图标的按钮组件
 * Author:Colin3dmax
 */
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {
    StyleSheet,
    View,
    Text,
    Image,
    TouchableOpacity,
} from 'react-native';
import IconButton from './comp.icon-button'

class SwitchButton extends Component {

    static propTypes = {
        leftTitle:PropTypes.string,
        rightTitle:PropTypes.string,
        onSelectChanged:PropTypes.func,
    }

    static defaultProps = {

    }

    constructor(props) {
        super(props)
        this.state = {
            selectIndex:0,
        }
    }

    genButtonItem(index,switchBtnStyle,onPress,title){
        const {selectIndex} = this.state
        let activeBtnStyle = null;
        if(selectIndex==index){
            activeBtnStyle = styles.switchBtnActive;
        }
        return (<IconButton style={[switchBtnStyle,activeBtnStyle]} textStyle={styles.switchBtnText} title={title} onPress={onPress}/>);
    }
    onPressSwitchBtn(index){
        const {onSelectChanged} = this.props
        this.setState({
            selectIndex:index,
        },()=>{
            if(onSelectChanged){
                onSelectChanged(index);
            }

        })
    }
    genSwitchUI(){
        const {leftTitle,rightTitle} = this.props
        return (
            <View style={styles.btnSwitchGroup}>
                {this.genButtonItem(0,styles.switchBtnLeft,this.onPressSwitchBtn.bind(this,0),leftTitle)}
                {this.genButtonItem(1,styles.switchBtnRight,this.onPressSwitchBtn.bind(this,1),rightTitle)}
            </View>
        );
    }


    render() {
        return this.genSwitchUI();
    }
}

const styles = StyleSheet.create({
    container: {
        backgroundColor:'#F7BE16',
        borderRadius:5,
        padding:8,
    },
    btnSwitchGroup:{
        width:150,
        flexDirection:'row',
        // borderWidth:1,
        // borderColor:'red',
    },
    switchBtnLeft:{
        flex:1,
        borderWidth:1,
        borderRightWidth:0,
        borderColor:'#0ABB07',
        borderTopRightRadius:0,
        borderBottomRightRadius:0,
        backgroundColor:'transparent',
    },
    switchBtnRight:{
        flex:1,
        borderWidth:1,
        borderLeftWidth:0,
        borderColor:'#0ABB07',
        borderTopLeftRadius:0,
        borderBottomLeftRadius:0,
        backgroundColor:'transparent',
    },
    switchBtnText:{
        fontSize:16,
    },
    switchBtnActive:{
        backgroundColor:'#0ABB07'
    },
});

export default SwitchButton;